<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 活动报名列表
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
      <!-- Vue-ElementUI el-table表格中根据后端获取的0、1、2显式对应性别中文（未知、男、女）
        https://blog.csdn.net/qq_40905896/article/details/115552879
        https://blog.csdn.net/sea9528/article/details/108871374
         -->
        <el-table-column fixed prop="sign_id" label="活动报名id" width="80"></el-table-column>
        <el-table-column prop="activity_id" label="活动id" width="100"></el-table-column>
        <el-table-column prop="activity_status" label="活动报名状态" width="100"></el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="300"></el-table-column>
        <el-table-column fixed prop="update_time" label="修改时间" width="80"></el-table-column>
        <el-table-column prop="is_delete" label="是否删除" width="100" :formatter="onLineStatus" >
          <!--  eslint-disable-next-line --> <!--https://blog.csdn.net/HanXiaoXi_yeal/article/details/115365751-->
           <template #default="scope"> 
              <el-tag type="success" v-if="scope.row.is_delete==0">未删除</el-tag>
              <el-tag type="success" v-if="scope.row.is_delete==1">已删除</el-tag>
            </template>
            <!--  eslint-disable-next-line --> <!--https://blog.csdn.net/HanXiaoXi_yeal/article/details/115365751-->
            <!-- <template slot-scope="scope"> 
              <span v-if="scope.row.is_delete==0" style="color:black">已激活</span> 
              <span v-else style="color:red">未激活</span>
               </template>  -->
        </el-table-column>
        <el-table-column prop="sign_user_id" label="报名用户id" width="100"></el-table-column>
        <el-table-column prop="sign_user_name" label="报名用户姓名" width="100"></el-table-column>
        <el-table-column  prop="studentNum" label="学号" width="80"></el-table-column>

      

      </el-table>
    </div>
  </div>
</template>

<script>
import { activitysignlist } from "../api/other";
export default {
  name: "activitysign",
  data() {
    return {
      tableData: [],
      form: {
        sign_id: "",
        activity_id: "",
        activity_status: "",
        create_time: "",
        update_time: "",
        is_delete: "",
        sign_user_id: "",
        sign_user_name: "",
        studentNum: ""
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getData() {
      activitysignlist().then(res => {
          console.log(res)
        this.tableData = res.data.list;
      });
    },

    // sfktFormate(row){
    //   if (row.is_delete == 0) {
    //     return "未删除";
    //   } else if(row.is_delete == 1){
    //     return "已删除";
    //   }
    // },
   onLineStatus: function(row) {
     console.log(row)
      return row.is_delete == 0 ? "未删除" : "已删除";
    },

  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
